<!--  -->
<template>
  <div class="size-full relative">
    <div class="flex h-8 justify-between">
      <button class="label-btn" :class="activeTab == 0 && 'btn-act'" @click="switchTab(0)">
        存量市场数据
      </button>
      <button class="label-btn" :class="activeTab == 1 && 'btn-act'" @click="switchTab(1)">
        年度新增数量
      </button>
    </div>
    <div style="height: calc(100% - 32px)" class="w-full" ref="ChartRight2"></div>
    <div
      class="absolute top-8 right-[0] w-[58%] grid grid-cols-3 text-sm gap-1"
      style="height: calc(100% - 4rem)"
    >
      <div
        v-for="(item, index) in chartData"
        :key="index"
        class="h-full flex flex-col justify-around w-full"
        :class="index == 2 ? 'text-xs' : ''"
      >
        <div class="flex items-center justify-start">
          <div
            class="w-4 h-3 mr-2 rounded-sm shrink-0"
            :style="`background-color:${colorList[index]}`"
          ></div>
          <div class="truncate">{{ item.label }}</div>
        </div>
        <div class="flex items-end justify-start">
          <div class="text-lg text-[#00FFF4] truncate">
            <NumberGrowWarp :value="item.num"></NumberGrowWarp>
          </div>
          <div class="leading-7">户</div>
        </div>
        <div class="flex items-end justify-start">
          <div class="text-lg text-[#00FFF4] truncate">
            <NumberGrowWarp :value="item.value"></NumberGrowWarp>
          </div>
          <div class="leading-7">亿元</div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-0 text-center w-full text-sm text-[#7EB2E0]">
      *据统计时间截止2024年11月30日
    </div>
    <DialogBox
      title="本年度企业登记情况统计"
      :show="showDialog"
      @close="showDialog = false"
      @opened="initDetail"
    >
      <div ref="detailChartRight2" class="h-full"></div>
    </DialogBox>
  </div>
</template>

<script setup lang="ts">
import { requestApi } from '@/api'
import DialogBox from '@/components/box/DialogBox.vue'
import NumberGrowWarp from '@/components/number-grow-warp/NumberGrowWarp.vue'
import { defaultTooltipStyle, useEcharts } from '@/util/e-chart'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const showDialog = ref(false)

const activeTab = ref(0)

const ChartRight2 = ref<HTMLElement>()
let mainChart: useEcharts
const detailChartXAxis = ref<string[]>([])
const totalLegalPerson = ref<string[]>([])
const totalRegCapital = ref<string[]>([])

const initMainChart = () => {
  requestApi.GetCountLegalPersonData('2024').then((res) => {
    detailChartXAxis.value = res.map((item) => dict_person[item.codeType])
    totalLegalPerson.value = res.map((item) => item.totalLegalPerson)
    totalRegCapital.value = res.map((item) => item.totalRegCapital)
  })
  const Data = getMainOption(
    chartData.value.map((e) => {
      return {
        value: e.num,
        name: e.label
      }
    }),
    chartData.value.map((e) => {
      return {
        value: e.value,
        name: e.label
      }
    })
  )
  mainChart = new useEcharts(
    ChartRight2.value!,
    Data,
    (data) => {
      console.log(data.value)
      initTable()
    },
    true
  )
}
const initTable = () => {
  showDialog.value = true
}
const colorList = ['#77CE8E', '#00FFF4', '#39C4FF', '#73FBEA']
const getMainOption = (
  data: { value: number; name: string }[],
  data2: { value: number; name: string }[]
): EChartsOption => {
  return {
    title: [
      {
        text: '户数',
        textAlign: 'center',
        left: '19%',
        top: 0,
        backgroundColor: '#0005',
        borderRadius: 5,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: 'D-DIN-PRO-500-Medium',
          fontSize: 16
        }
      },
      {
        text: '注册资金',
        textAlign: 'center',
        left: '19%',
        top: '45%',
        backgroundColor: '#0005',
        borderRadius: 5,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: 'D-DIN-PRO-500-Medium',
          fontSize: 16,
          padding: 5
        }
      }
    ],
    color: colorList,
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    series: [
      {
        name: '注册资金',
        type: 'pie',
        radius: [0, '50%'],
        center: ['20%', '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: data2
      },
      {
        center: ['20%', '50%'],
        name: '户数',
        type: 'pie',
        radius: ['60%', '75%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  }
}
onMounted(() => {
  initMainChart()
})

const chartData = ref([
  { label: '企业', num: 107337, value: 7773.86 },
  { label: '个体户', num: 175430, value: 177.1 },
  { label: '农民专业合作社', num: 468, value: 8.62 }
])

const switchTab = (idx: number) => {
  activeTab.value = idx
  if (idx == 0) {
    chartData.value = [
      { label: '企业', num: 107337, value: 7773.86 },
      { label: '个体户', num: 175430, value: 177.1 },
      { label: '农民专业合作社', num: 468, value: 8.62 }
    ]
  } else {
    chartData.value = [
      { label: '企业', num: 10268, value: 363.2 },
      { label: '个体户', num: 15772, value: 33.7 },
      { label: '农民专业合作社', num: 8, value: 0.11 }
    ]
  }
  const Data = getMainOption(
    chartData.value.map((e) => {
      return {
        value: e.num,
        name: e.label
      }
    }),
    chartData.value.map((e) => {
      return {
        value: e.value,
        name: e.label
      }
    })
  )
  mainChart.setOption(Data)
}

//弹窗内逻辑
const detailChartRight2 = ref<HTMLElement>()
const initDetail = () => {
  const Data = getDetailOptions()
  new useEcharts(detailChartRight2.value!, Data, (data) => {
    console.log(data.value)
  })
}
const getDetailOptions = (): EChartsOption => {
  var clientWidth = detailChartRight2.value!.clientWidth
  console.log(detailChartXAxis.value)

  return {
    color: ['#3A84D6', '#FFBE34', '#F2C96F', '#52D98B'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      ...defaultTooltipStyle
    },
    legend: {
      top: 10,
      textStyle: {
        color: '#FFF', // 字体颜色
        fontSize: 12 // 字体大小
      },
      data: ['注册金额', '户数']
    },
    grid: {
      left: 50,
      right: 65,
      bottom: 60,
      top: 50
    },
    xAxis: [
      {
        type: 'category',
        axisLabel: {
          color: '#FFF', // 字体颜色
          fontSize: 12, // 字体大小
          padding: [0, 0, 0, 0], // 与轴线的间距 [上, 右, 下, 左]
          width: 60,
          overflow: 'break',
          align: 'center',
          interval: 0 //使x轴文字显示
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: ['个体工商户', '个人独资企业', '合伙企业', '企业法人', '公司', '农民专业合作社']
      },
      {
        type: 'value',
        max: clientWidth,
        show: false
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '户数（个）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 2 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      {
        type: 'value',
        name: '注册金额（亿元）',
        nameTextStyle: {
          color: '#7EB2E0', // 设置名称字体颜色
          fontSize: 14 // 设置名称字体大小
        },
        axisLabel: {
          color: '#7EB2E0', // 设置字体颜色
          fontSize: 14 // 设置字体大小
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#0A375D',
            width: 0 // 虚线宽度
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '户数',
        type: 'bar',
        barWidth: '42%',
        itemStyle: {
          //lenged文本
          color: function () {
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0.5,
                  color: '#4F8BDA' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#7CD5FA' // 100% 处的颜色
                }
              ],
              false
            )
          }
        },
        data: [14447, 41, 143, 0, 8854, 8]
      },
      {
        name: '注册金额',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 1,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#FFBE34'
        },
        itemStyle: {
          color: '#FFF',
          borderColor: '#FFBE34',
          borderWidth: 3
        },
        data: [325228.22, 3796.8, 1245572.17, 0.0, 1803560.81, 1085.0]
      }
    ]
  }
}

const dict_person: any = {
  '00010000': '市场主体',
  '00010001': '内资非私-公司',
  '00010002': '内资非私-股份合作',
  '00010003': '内资非私-国有',
  '00010004': '内资非私-集体',
  '00010005': '内资非私-联营',
  '00010006': '内资非私-其他',
  '00010007': '私营-独资',
  '00010008': '私营-股份有限公司',
  '00010009': '私营-合伙',
  '00010010': '私营-有限责任公司',
  '00010012': '外资-股份有限公司',
  '00010013': '外资-合伙',
  '00010015': '外资-外资其他',
  '00010016': '外资-有限责任',
  '00020000': '事业单位',
  '00020001': '事业单位',
  '00030000': '社会团体',
  '00030001': '社会团体',
  '00030002': '民办非企',
  '00030003': '基金会',
  '00030004': '群众团体',
  '00030005': '宗教团体',
  '00030006': '宗教活动场所',
  '00030007': '律师事务所',
  '00040000': '其他法人',
  '00050000': '机关法人',
  '00050001': '机关法人',
  '00050002': '党政机关',
  '00050003': '机关(挂牌机构)',
  '00050004': '机关(临时机构)',
  '00050005': '机关(内设机构)',
  '00050006': '机关(派出机构)',
  '00050007': '机关(派出机关)',
  '00050008': '机关(派驻机关)',
  '00050009': '机关(议事协调机构)',
  '00050010': '机关(直属行政机构)',
  '00050011': '机关(职能机构)',
  '00060000': '其他社会组织',
  '00060001': '个体工商户',
  '00060002': '农民合作社',
  '00060003': '司法鉴定机构',
  '00060004': '公证处',
  '00060005': '法律服务所',
  '00060006': '基层工会组织',
  '00060007': '机关(非法人)'
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.label-btn {
  background: url(@/assets/ic_littletitle_1.png);
  background-size: 100% 100%;
  width: 50%;
  height: 26px;
  line-height: 26px;
  color: #5884af;
  transition: all 0.2s;
}

.btn-act {
  background: url(@/assets/ic_littletitle_1_1.png);
  background-size: 100% 100%;
  color: #73fbe0;
}
</style>
